<template>
	<div>
		<el-dialog title="选择商品" width="1340px" :visible.sync="dialogVisible">
				<div class="flex main_wrapper">
					<div class="flex-1">
						<el-form :inline="true" :model="searchForm" class="demo-form-inline" @submit.native.prevent>
							<el-form-item label="商品名称">
								<el-input v-model="searchForm.goods_name" placeholder="请输入商品名称" @keyup.enter.native="search" />
							</el-form-item>
							<el-form-item label="商品类型" prop="meal_id">
								<el-select v-model="searchForm.meal_id" clearable placeholder="请选择产品类别" @change="handelChange">
									<el-option v-for="item in mealList" :key="item.id" :label="item.type" :value="item.id" />
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-button size="small" type="primary" @click="search()">查询</el-button>
								<el-button size="small" @click="reset()">重置</el-button>
								<slot name="btns" />
							</el-form-item>
						</el-form>
						<div class="flex flex-wrap goods_list">
							<template v-for="item in goodsList">
								<div class="flex goods_item" :class="{ 'active': isSelect(item.id) }" @click="handleSelect(item)">
									<!-- <svg-icon v-if="isSelect(item.id)" icon-class="check" :size="10" class="check_icon" /> -->
									<el-image :src="$globalObj.imgBaseUrl + item.img" fit="fill" />
									<div class="line-block">
										<p class="goods_title">{{ item.title }}</p>
										<p class="goods_id">ID: {{ item.id }}</p>
										<p class="goods_id">价格: {{ item.box_price }}</p>
										<p class="goods_id">类型: {{ item.meal_id==1?'传说':item.meal_id==2?'史诗':item.meal_id==3?'稀有':item.meal_id==4?'尊贵':'暂无' }}</p>
									</div>
								</div>
							</template>
						</div>
						<div class="text-right">
							<el-pagination :current-page.sync="searchForm.page" :page-size="pageSize" layout="total, prev, pager, next" :total="total" prev-text="上一页" next-text="下一页" background @current-change="handleCurrentChange" />
						</div>
					</div>
					<div class="checked_wrap">
						<p style="margin-bottom:30px">已选商品（{{ selectItems.length }}）</p>
						<template v-for="(sItem, index) in selectItems">
							<goods-link :key="sItem.id" ref="goodsLink" :show-cate="showCate" :goods-data="sItem" :show-sort="multiple" :show-tool="showCheckedTool" @handleDelete="deleteGoods(index)" @upSort="upSort(index)" @downSort="downSort(index)" />
						</template>
					</div>
    		</div>
		<div slot="footer" class="dialog-footer">
			<el-button size="small" @click="dialogVisible = false;this.$refs['form'].resetFields()">取 消</el-button>
			<el-button size="small" type="primary" @click="submit">确 定</el-button>
		</div>
	</el-dialog>
	
	</div>
	
</template>

<script>
import goodsDialog from '@/components/goodsDialog'
import { getCategoryList, getGoodsList, getSelectGoodsList } from '@/api/goods'
import goodsLink from '@/views/recommend/compoments/goodsLink'
import { setBoxGoods } from '@/api/audit'
export default {
	components:{goodsDialog,goodsLink},
	props:{
		boxId:{
			type:String,
			default:''
		}
	},
	data() {
		return {
			dialogVisible: false,
			searchForm:{
				goods_name:'',
				cate_id:'',
				page:1,
				meal_id:''
			},
			goodsList:[],
      selectItems: [],
			pageSize:12,
			appendToBody:true,
			showTypeSelect:true,
			showCheckedTool:true,
			multiple:true,
      total: 0,
			mealList:[
				{id:1,type:'传说'},
				{id:2,type:'史诗'},
				{id:3,type:'稀有'},
				{id:4,type:'尊贵'}
			]
		}
	},
	mounted() {
		  
	},
	watch:{
		dialogVisible(val) {
			if (val) {
				this.getList()
				this.getList2()
			}
		}
	},
	methods: {
		// 查询
		search() {
			// console.log(123)
			this.getList()
		},
		// 重置
		reset() {
		  if (this.$refs.myDatePicker) {
			this.$refs.myDatePicker.reset()
		  }
		  this.searchForm = {
			goods_name: '',
			meal_id: ''
		  }
		  this.getList()
		},
		// 获取选中商品
		handelChange(){

		},
		// 升序
		upSort(index) {
			if (index === 0) {
				return
			}
			const item = this.selectItems[index]
			this.$set(this.selectItems, index, this.selectItems[index - 1])
			this.$set(this.selectItems, index - 1, item)
		},
		// 降序
		downSort(index) {
			if (index === this.selectItems.length - 1) {
				return
			}
			const item = this.selectItems[index]
			this.$set(this.selectItems, index, this.selectItems[index + 1])
			this.$set(this.selectItems, index + 1, item)
		},
    // 删除商品
    deleteGoods(index) {
      this.selectItems.splice(index, 1)
    },
    // 页码切换
    handleCurrentChange(val) {
      this.searchForm.page = val
      this.getList()
    },
    // 判断是否选中
    isSelect(id) {
      return this.selectItems.findIndex(item => item.id == id) > -1
    },
    // 点击选中
    handleSelect(select) {
      const index = this.selectItems.findIndex(item => item.id == select.id)
      if (index > -1) {
        // 已经选中取消选中
        this.selectItems.splice(index, 1)
      } else {
        // 选中
        if (this.multiple) {
          // 多选
            this.selectItems.push(select)
        } else {
          // 单选
          this.selectItems = [select]
        }
      }
    },
		getList(){
			getGoodsList({ pageSize: this.pageSize, ...this.searchForm }).then(res=>{
				this.goodsList=res.data
				this.total = res.total
			})
			
		},
		getList2(){
			
			const params={
				box_id:this.boxId
			}
			getSelectGoodsList(params).then(res => {
				this.selectItems = res || []
				// console.log(this.selectItems)
			})
		},
		submit(){
			let arr = []
			this.selectItems.forEach(element => {
				arr.push(element.id)
			});
			let params={
				box_id:this.boxId,
				meal:this.searchForm.meal_id,
				goods:arr
			}
			// if(params.meal==''){
			// 	this.$message({
			// 		message: '请选择商品类型',
			// 		type: 'warning'
			// 	})
			// 	return 
			// }
			setBoxGoods(params).then(res=>{
				this.$message({
					message: '设置成功',
					type: 'success'
				})
				this.$emit('getList')
				this.dialogVisible=false
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.goods_item {
  position: relative;
  width: 310px;
  height: 110px;
  padding: 10px;
  margin-bottom: 30px;
  margin-right: 10px;
  border: 1px solid #eeeeee;

  &.active {
    border: 1px solid $mainBlue;
  }

  .check_icon {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
  }

  .el-image {
    margin-right: 10px;
    width: 90px;
    height: 90px;
  }

  .goods_title {
    color: #666666;
    // margin: 12px 0;
		width: 150px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
  }

  .goods_id {
    color: #999999;
    margin-top: 10px;
  }
}

.checked_wrap {
  width: 350px;
  padding: 10px;
  max-height: 560px;
  overflow: auto;
  border-left: 1px solid #eeeeee;
}
</style>
